<template>
  <div>
<h1>客户统计</h1>
    <div class="chart">
      <div class="chart1">
        <EChart
          ref="NewAndOld_chart"
          style="width: 50%; height: 280px"
        ></EChart>
        <EChart ref="aAndb_chart" style="width: 50%; height: 280px"></EChart>
      </div>
      <div class=chart2>
        <EChart ref="level1_chart" style="width: 50%; height: 280px"></EChart>
        <EChart ref="level2_chart" style="width: 50%; height: 280px"></EChart>
      </div>
      <div class=chart3>
        <EChart ref="aLevel_chart" style="width: 50%; height: 280px"></EChart>
        <EChart ref="bLevel_chart" style="width: 50%; height: 280px"></EChart>
      </div>
    </div>
  </div>
</template>

<script>
import EChart from "./Echart.vue";
import service from "../request/index.js";
import * as echarts from "echarts";
import { useDataStore } from "../stores/data.js";
export default {
  components: {
    EChart,
  },
  data() {
    return {
      data: useDataStore(),
      NewAndOld_option: {
        title: {
          text: "新增客户和存量客户饼图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [],
      },
      aLevel_option: {
        title: {
          text: "负责人aaa的客户级别比例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [],
      },
      bLevel_option: {
        title: {
          text: "负责人bbb的客户级别比例",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "left",
        },
        series: [],
      },
      aAndb_option: {
        title: {
          text: "负责人aaa和负责人bbb的客户数条形图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: ["aaa", "bbb"],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
      level1_option: {
        title: {
          text: "1级客户的分布饼图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [],
      },
      level2_option: {
        title: {
          text: "2级客户的分布饼图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
        },
        series: [],
      },
    };
  },
  methods: {
    async getChartdata() {
      //新老客户
      var oldNum_total = this.data.getOldNumTotal();
      var newNum_total = this.data.getNewNumTotal();
      // 负责人的客户级别人数（存量）
      var old_level = this.data.getOldLevelNum();
      var old_aLevel1 = old_level[0];
      var old_aLevel2 = old_level[1];
      var old_bLevel1 = old_level[2];
      var old_bLevel2 = old_level[3];
      // 负责人的客户级别人数（新增）
      var new_level = this.data.getNewLevelNum();
      var new_aLevel1 = new_level[0];
      var new_aLevel2 = new_level[1];
      var new_bLevel1 = new_level[2];
      var new_bLevel2 = new_level[3];
      var aLevel1 = old_aLevel1 + new_aLevel1;
      var aLevel2 = old_aLevel2 + new_aLevel2;
      var bLevel1 = old_bLevel1 + new_bLevel1;
      var bLevel2 = old_bLevel2 + new_bLevel2;
      this.NewAndOld_option.series.push({
        data: [
          { name: "存量客户", value: oldNum_total },
          { name: "新增客户", value: newNum_total },
        ],
        type: "pie",
      }),
        this.level1_option.series.push({
          data: [
            { name: "负责人aaa", value: aLevel1 },
            { name: "负责人bbb", value: bLevel1 },
          ],
          type: "pie",
        }),
        this.level2_option.series.push({
          data: [
            { name: "负责人aaa", value: aLevel2 },
            { name: "负责人bbb", value: bLevel2 },
          ],
          type: "pie",
        }),
        this.aLevel_option.series.push({
          data: [
            { name: "1级客户", value: aLevel1 },
            { name: "2级客户", value: aLevel2 },
          ],
          type: "pie",
        }),
        this.bLevel_option.series.push({
          data: [
            { name: "1级客户", value: bLevel1 },
            { name: "2级客户", value: bLevel2 },
          ],
          type: "pie",
        }),
        this.aAndb_option.series.push({
          data: [aLevel1 + aLevel2, bLevel1 + bLevel2],
          type: "bar",
        }),
        this.$refs.NewAndOld_chart.setOption(this.NewAndOld_option);
      this.$refs.level1_chart.setOption(this.level1_option);
      this.$refs.level2_chart.setOption(this.level2_option);
      this.$refs.aLevel_chart.setOption(this.aLevel_option);
      this.$refs.bLevel_chart.setOption(this.bLevel_option);
      this.$refs.aAndb_chart.setOption(this.aAndb_option);
    },
    // getData() {
    //    var aLevel1 = this.data.getLevelNum();
    //   console.log(aLevel1[0]);
    // },
    setOption(opt) {
      this.echart.setOption(opt);
    },
    // getOldNumTotal(){
    //   let a=this.data.getOldDataNum()
    //   console.log("返回的数据",a)
    // }
    // getNewNumTotal(){
    //   let a=this.data.getOldDataNum()
    //   console.log("返回的数据",a)
    // }
  },
  mounted() {
    this.getChartdata();
  },
};
</script>

<style lang="scss" scoped>
.chart1{
  display:flex;
  margin-bottom:50px;
}
.chart2{
  display:flex;
  margin-bottom:50px;
}
.chart3{
  display:flex;
  margin-bottom:50px;
}
</style>
